<div class="wrapper">

  <!-- Main Header -->
  <header>
    <nav id="walkoffNav" class="navbar navbar-expand-md navbar-dark">
      <a class="navbar-brand" routerLink="/"><b>WALK</b>OFF</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/workflows" routerLinkActive="active"><i class="fa fa-sitemap"></i><span class="navLink">Workflows</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/execution" routerLinkActive="active"><i class="fa fa-play-circle"></i><span class="navLink">Execution</span></a>
          </li>
          <li *hasPermission="['editApps']" class="nav-item">
              <a class="nav-link" routerLink="/apps" routerLinkActive="active"><i class="fa fa-cube"></i><span class="navLink">Applications</span></a>
            </li>
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/globals" routerLinkActive="active"><i class="fa fa-globe"></i><span class="navLink">Globals</span></a>
          </li> -->
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/scheduler" routerLinkActive="active"><i class="fa fa-calendar-o"></i><span class="navLink">Scheduler</span></a>
          </li> -->
          
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/messages" routerLinkActive="active"><i class="fa fa-envelope-o"></i><span class="navLink">Messages</span></a>
          </li> -->
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/metrics" routerLinkActive="active"><i class="fa fa-pie-chart"></i><span class="navLink">Metrics</span></a>
          </li> -->
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/settings" routerLinkActive="active"><i class="fa fa-store"></i><span class="navLink">Marketplace</span></a>
          </li> -->
          <li *hasPermission="['viewReports', 'editReports']" class="nav-item dropdown" routerLinkActive="active">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-area-chart"></i><span class="navLink">Reports</span>
            </a>
            <div class="dropdown-menu border-0" aria-labelledby="navbarDropdown">
              <a *ngFor="let report of reports" class="dropdown-item installedReport" routerLink="/report/{{report.id}}">
                <span>{{ report.name }}</span>
              </a>
              <ng-container *hasPermission="['editReports']">
                  <div *ngIf="reports && reports.length > 0" class="dropdown-divider"></div>
                  <a class="dropdown-item installedReport" routerLink="/report/new">
                    <span><i>Create New Report...</i></span>
                  </a>
              </ng-container>
            </div>
          </li>

          <li *hasPermission="['isAdmin', 'editGlobals', 'editSchedule']" class="nav-item dropdown" routerLinkActive="active">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-gear"></i><span class="navLink">Settings</span>
              </a>
              <div class="dropdown-menu border-0" aria-labelledby="navbarDropdown">
                <!-- <a class="dropdown-item installedReport" routerLink="/execution" routerLinkActive="active"><i class="fa fa-play-circle"></i><span class="navLink">Execution Log</span></a> -->
                <a *hasPermission="['isAdmin']" class="dropdown-item installedReport" routerLink="/settings/users" routerLinkActive="active"><i class="fa fa-users"></i><span class="navLink">Users</span></a>
                <a *hasPermission="['editGlobals']" class="dropdown-item installedReport" routerLink="/settings/globals" routerLinkActive="active"><i class="fa fa-globe"></i><span class="navLink">Globals</span></a>
                <a *hasPermission="['editSchedule']" class="dropdown-item installedReport" routerLink="/settings/scheduler" routerLinkActive="active"><i class="fa fa-calendar-o"></i><span class="navLink">Scheduler</span></a>
                <a *hasPermission="['isAdmin']" class="dropdown-item installedReport" href="/portainer/" target="_blank"><i class="fa fa-sign-out"></i><span class="navLink">Portainer.io</span></a>
              </div>
            </li>
          <!-- <li class="nav-item">
            <a class="nav-link" routerLink="/settings" routerLinkActive="active"><i class="fa fa-gear"></i><span class="navLink">Settings</span></a>
          </li> -->
        </ul>
        <!-- <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form> -->
        <!-- Navbar Right Menu -->
        <ul class="navbar-nav">
          <!-- <li class="nav-item dropdown messages messages-menu">
            <a class="nav-link" [class.newMessages]="newMessagesCount" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" (click)="recalculateRelativeTimes()">
              <i class="fa" [ngClass]="{ 'fa-envelope': newMessagesCount, 'fa-envelope-open-o': !newMessagesCount }"></i>
              <span> {{newMessagesCount}}</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="messageDropdown">
              <span *ngIf="!messageListings.length" class="noMessages">You have no messages.</span>
                <table class="messageTable">
                  <tr *ngFor="let messageListing of messageListings" [class.oldMessage]="messageListing.is_read">
                    <td>
                        <i *ngIf="messageListing.awaiting_response" class="fa fa-exclamation required" title="This message is awaiting response."></i>
                    </td>
                    <td>
                        <a class="dropdown-item" href="#" (click)="openMessage($event, messageListing)">{{utils.getTruncatedString(messageListing.subject, 25, '(no subject)')}}</a>    
                    </td>
                    <td [title]="utils.getLocalTime(messageListing.created_at)">{{notificationRelativeTimes[messageListing.id]}}</td>
                  </tr>
                </table>
            </div>
          </li> -->
          <li class="nav-item">
              <a class="nav-link" href="https://walkoff.readthedocs.io" target="_blank"><i class="fa fa-file-text-o"></i><span class="navLink">Documentation</span></a>
            </li>
          <li class="nav-item dropdown user user-menu" routerLinkActive="active">
            <a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <!-- The user image in the navbar-->
              <img src="client/dist/walkoff/assets/img/genericUser.png" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="userName">{{currentUser}}</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right border-0" aria-labelledby="navbarUserDropdown">
              <!-- <a class="dropdown-item" routerLink="/settings" routerLinkActive="active"><i class="fa fa-gear"></i><span class="navLink">Settings</span></a> -->
              <a class="dropdown-item installedDashboard" href="#" (click)="editUser()"><i class="fa fa-user"></i><span class="navLink">User Profile</span></a>
              <a class="dropdown-item installedDashboard" routerLink="/logout"><i class="fa fa-sign-out"></i><span class="navLink">Sign Out</span></a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <main role="main">
    <section>
      <div>
        <router-outlet></router-outlet>
        <!--Modal container for ng-bootstrap, should remove if upgrading to bootstrap 4 / ng-bootstrap 1.0.0-alpha.18+-->
        <template ngbModalContainer></template>
      </div>
    </section>
    <div></div>
  </main>

  <!--<footer class="footer">
    <strong>WALKOFF</strong>
  </footer>-->
</div>
